<template>
  <span>
    <template v-for="(item, index) in options">
      <template v-if="values.includes(item.value)">
        <span
          :key="item.value"
          :index="index"
        >{{ item.label }}</span
        >
      </template>
    </template>
  </span>
</template>

<script lang="ts">
    export default {
        name: "DictSpan",
        props: {
            options: {
                type: Array,
                default: null,
            },
            value: [Number, String, Array],
        },
        computed: {
            values() {
                if (this.value !== null && typeof this.value !== 'undefined') {
                    return Array.isArray(this.value) ? this.value : [String(this.value)];
                } else {
                    return [];
                }
            },
        },
    };
</script>
